<template>
    <h1>EL-表格组件</h1>
    <el-table :data="arr" style="width: 600px; margin: 0 auto">
        <el-table-column prop="id" label="编号" type="index" width="80px" align="center" ></el-table-column>
        <el-table-column prop="name" label="姓名" align="center"></el-table-column>
        <el-table-column prop="salary" label="工资" align="center"></el-table-column>
        <el-table-column prop="job" label="职位" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="200px">
            <!--     自定义列模板template    -->
            <!--     #default 定义了一个插槽(slot)名为default
                scope 就是一个对象，该对象是一个范围对象，可保存上下文数据  -->
            <template #default="scope">
            <!--     scoped对象保存了当前行数据的索引$index(从0开始)与当前行的完整对象scope.row     -->
                <el-button type="primary" size="mini" @click="edit(scope.$index, scope.row)">编辑</el-button>
                <el-button type="danger" size="mini" @click="del(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup>

import {ref} from "vue";

const arr = ref([
    {name: '张三', salary: 30000, job: 'Java工程师'},
    {name: '李四', salary: 40000, job: 'Java工程师'},
    {name: '王五', salary: 50000, job: 'Java工程师'},
    {name: '赵六', salary: 60000, job: 'Java工程师'},
    {name: '陈世龙', salary: 150000, job: 'Java架构师'},
]);
// 编辑员工方法
const edit = (index, row) => {
    console.log(index, row)
    arr.value.splice(index, 1, {
        name: prompt('请输入姓名', row.name),
        salary: prompt('请输入工资', row.salary),
        job: prompt('请输入职位', row.job)
    });
}
// 删除员工方法
const del = (index, row) => {
    if (confirm("确定要将"+row.name+"删除吗？")){
        arr.value.splice(index, 1);
    }
    
}
</script>

<style scoped>

</style>